<template>
  <a-modal
    v-bind="attrs"
    modal-class="titan-preview"
    body-class="titan-preview_body"
    :title="title"
    title-align="start"
    :footer="pagination"
    :mask-closable="false"
  >
    <section class="height-100-percent more-tags">
      <a-tag
        v-for="(item, index) in showData"
        :key="index + 'more-tags'"
      >
        <info-line-render
          v-if="data.render"
          :data="item"
          :render="data.render"
        />

        <span v-else>{{ item }}</span>
      </a-tag>
    </section>

    <template
      #footer
      v-if="pagination"
    >
      <a-pagination
        v-model:current="page"
        :page-size="size"
        :total="total"
      />
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { IPreview } from "@/components/info-line/src/types";
  import { computed, ref, useAttrs } from "vue";
  import InfoLineRender from "./Render";

  defineOptions({
    name: "TitanPreview",
  });

  const attrs = useAttrs();

  const props = withDefaults(defineProps<IPreview>(), {
    data: () => ({}),
    pagination: false,
    size: 50,
  });

  const page = ref(1);

  const title = computed(() => {
    return props.data.label || "";
  });

  const total = computed(() => {
    return (props.data?.value as any[]).length;
  });

  const showData = computed(() => {
    if (!props.pagination) {
      return props.data.value || [];
    }
    return (props.data.value as any[])?.slice((page.value - 1) * props.size, page.value * props.size);
  });
</script>
